import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/components/home/Home'
import Hot from '@/components/home/Hot'
import News from '@/components/home/News'

import About from '@/components/About'
import Profile from '@/components/Profile'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect:'/home'
    },
    {
      path: '/home',
      // name:'Home',
      component:Home,
      // 元数据: 描述数据的数据
      meta:{
        title:"首页"
      },
      children:[
        {
          path: '/',
          redirect:'hot'
        },
        {
          path:'hot',
          name:'Hot',
          // 元数据: 描述数据的数据
          meta:{
            title:"今日头条"
          },
          component:Hot
        },
        {
          path:'news',
          name:'News',
          // 元数据: 描述数据的数据
          meta:{
            title:"内容详情"
          },
          component:News
        }
      ]
    },
    {
      path: '/about',
      name:'About',
      // 元数据: 描述数据的数据
      meta:{
        title:"关于"
      },
      component:About
    },
    {
      path: '/profile/:userId',
      name:'Profile',
      // 元数据: 描述数据的数据
      meta:{
        title:"我的"
      },
      component:Profile,
      beforeEnter:(to, from, next) => {
        // console.log("profile beforeEnter", from, to);
        next();
      }
    }
  ],
  mode:'history',
  linkActiveClass:'show'
})

// 前置 全局导航守卫 跳转到这个路由之前
// 监听路由的跳转
router.beforeEach( (to, from, next) => {
  //from: 跳转前的路由对象route
  //to: 跳转后胡路由对象route
  // matched数组 存的所有路由 0 存的是第一层的路由对象
  //使用元数据
  // console.log("beforeEach------------", from, to);
  
  if(to.matched.length === 1){//如果是about profile 没有子路由
    document.title = to.meta.title;
  }else{//如果是home 有子路由 拼接 主路由
    let str = to.matched[0].meta.title;//首页 关于 我的
    // console.log(str);
    // 首页 - 今日头条
    for(let i = 1; i<to.matched.length; i++){
      // console.log(to.matched[i].meta.title);
      str += "-" + to.matched[i].meta.title;
      document.title = str;
    }
  }
  //进行下一步跳转
  next();
})

//后置 导航守卫
router.afterEach( (to, from) =>{
  // console.log("afterEach------------", from, to);
} )

export default router
